<template>
  <el-dialog :model-value="dialogVisible" @close="$emit('close')" title="查看上传状态" width="75%">
    <AsyncTable ref="tableRef" :columns="columns" :fetchData="fetchData" :showSift="false" />
  </el-dialog>
</template>

<script setup lang="jsx">
import { Loading } from '@element-plus/icons-vue'
import { getTaskList } from '@/api/asset/taskManage/index'
const tableRef = ref()
let preTableData = []
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  taskBatchNum: {
    type: String,
    default: '*'
  }
})
const formOption = reactive({
  name: '',
  typeSelect: null,
  scanMethod: '',
  status: '',
  deptId: '',
  creator: '',
  datasourceName: '',
  assetType: '',
  ip: '',
  startTime: [],
  batchNum: '',
  taskBatchNum: '*'
})
const statusColor = {
  1: '',
  2: '#409EFF',
  3: '#E6A23C',
  4: '#F56C6C',
  5: '#67C23A',
  6: '#E6A23C'
}
const taskData = reactive({
  scanMethodList: {
    1: '单次扫描',
    2: '定期扫描'
  },
  exitBatchList: [],
  userList: [],
  cascaderProps: {
    checkStrictly: true,
    label: 'name',
    value: 'id',
    children: 'children'
  },
  statusList: {
    1: '待启动',
    2: '进行中',
    3: '暂停',
    4: '失败',
    5: '成功',
    6: '停止'
  },
  ids: []
})

const columns = [
  { label: 'id', prop: 'id', 'min-width': 150, 'show-overflow-tooltip': true },
  { label: '文件名称', prop: 'field16', 'min-width': 150, 'show-overflow-tooltip': true },
  {
    label: '出境批次',
    prop: 'batchNum',
    'show-overflow-tooltip': true,
    hide: props.taskBatchNum === '**'
  },
  {
    label: '执行进度',
    'min-width': 120,
    render: ({ row }) => <el-progress percentage={parseFloat(row.progress)} />
  },
  {
    label: '状态',
    width: 90,
    'show-overflow-tooltip': true,
    render: ({ row }) => {
      return row.status == 4 ? (
        <el-tooltip
          class="box-item"
          effect="dark"
          content={row?.failReason || '无'}
          placement="top"
        >
          <span style={{ color: statusColor[row.status] }}>{taskData.statusList[row.status]}</span>
        </el-tooltip>
      ) : (
        <>
          <span style={{ color: statusColor[row.status] }}>{taskData.statusList[row.status]}</span>
          {row.status == 2 ? (
            <el-icon class="el-icon is-loading" style="vertical-align:-3px;margin-left: 5px;">
              <Loading />
            </el-icon>
          ) : (
            ''
          )}
        </>
      )
    }
  },
  {
    label: '数据标准',
    prop: 'dataStandardName',
    width: 150
  },
  {
    label: '归属机构',
    prop: 'department',
    width: 150
  },
  {
    label: '归属系统',
    prop: 'system',
    width: 150
  },
  { prop: 'creatorName', label: '创建人', width: 80, 'show-overflow-tooltip': true },
  {
    prop: 'latestScanTime',
    label: '上传时间',
    'min-width': 170,
    'show-overflow-tooltip': true
  }
]

let timer = null
const runtime = () => {
  clearTimeout(timer)
  timer = setTimeout(async () => {
    const isRunning = preTableData.some((item) => item.status == 2)
    if (isRunning) {
      tableRef?.value?.currentPageReload()
    }
  }, 6000)
}

async function fetchData({ page, pageSize }) {
  let data = {
    ...formOption,
    type: [7],
    pageSize: pageSize,
    page: page,
    taskBatchNum: props.taskBatchNum
  }
  const res = await getTaskList(data)
  preTableData = res.data
  runtime()
  return {
    data: res.data,
    count: res.count
  }
}
</script>

<style lang="scss" scoped></style>
